import React, { useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'
import style from './css/index.module.css'
import {
  BellOutline,
  UserOutline, 
  ShopbagOutline,
  HandPayCircleOutline,
  CalendarOutline
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { getUserRole, hasFeaturePermission } from '../utils/permission'
function tabbar() {
    const navigate = useNavigate()
    const userRole = getUserRole()
    
    // 根据用户角色动态生成导航项
    const allTabs = [
      {
        key: '/index',
        title: '就医',
        icon: <HandPayCircleOutline style={{ fontSize: 20 }} />,
        permission: '首页'
      },
      {
        key: '/message',
        title: '消息',
        icon: <BellOutline style={{ fontSize: 20 }} />,
        permission: '消息中心'
      },
      {
        key: '/shopping',
        title: '商城',
        icon: <ShopbagOutline style={{ fontSize: 33,marginTop:-4,borderRadius: '50%',backgroundColor: '#ccc',padding:5 }} />,
        permission: '商城'
      },
      {
        key: '/anli',
        title: '患者案例',
        icon: <CalendarOutline style={{ fontSize: 20 }} />,
        permission: '患者案例'
      },
      {
        key: '/order',
        title: '我的',
        icon: <UserOutline style={{ fontSize: 20 }} />,
        permission: '我的'
      }
    ]
    
    // 根据权限过滤导航项
    const tabs = allTabs.filter(tab => hasFeaturePermission(tab.permission))
  const change = (key:string)=>{
    navigate(key)
  }
  return (
    <div className={style.tabbar}>
       <TabBar onChange={change}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default tabbar
